{% extends 'install-base.html' %}

{% block title %}{{dj_title}}{% endblock %}

{% block extra_js %}

    function search_handler (obj) {
        var csrftoken = getCookie('csrftoken');

        var container = $('#div_machine_list');
        $.ajax({
            type: 'post',
            url: '{%url ajax_getmlst dj_itype %}',
            dataType: 'html',
            data: $('#form_install').serializeArray(),
            async: false,
            crossDomain: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            },
            success: function(r) {
                container.html('<br>');
                container.attr('class', 'loading-indicator');
                setTimeout(function() {
                    $('#txt_host').attr('value', '');
                    //$('#sel_mgroup').attr('value', '');
                    container.attr('class', '');
                    container.html(r);
                }, 500);
            },
            error: function() {
                alert("get machine list failed!");
            }
        }); // end of ajax

    }
 
    function submit_handler () {
        $('#form_install').ajaxSubmit({
            dataType: 'json',
            beforeSerialize:function() {
                if (! $('#form_install').validationEngine('validate')) {
                    return false;
                }

                $.blockUI({ message: '<div id="div_blockbox" class="blockbox_wait"><h3>Just a moment...</h3></div>'});
            },
            success:function(r) {
                // type: alert, info
                if (r.type == 'alert') {
                    $('#div_blockbox').attr('class', 'blockbox_' + r.type);
                    $('#div_blockbox').html(r.content);
                    $('.blockOverlay').attr('title','click to go back').click($.unblockUI);
                } else {
                    // redirect to status tracking page
                    location = r.content;
                }
            },
            error:function() {
                $.unblockUI();
                alert("submit form_install failed!");
            }
        });  // end of ajaxSubmit
    }

    $(document).ready(function() {

{% include 'topnav-imd.js' %}

        $('#form_install').validationEngine('attach', {scroll: false});
        $('body').mousemove(function() {
            $('#form_install').validationEngine('hideAll');
        });


        /* For feild validation: if validation failed,
           validationEngine return true.
           For form validation: if validation failed,
           validationEngine return false
         */
        $('#sel_mgroup').change(function() {
            if($(this).validationEngine('validate')) {
                return;
            }
            search_handler($(this));
        }); // end of change

        $('#btn_search').click(function() { 
            if ($('#txt_host').validationEngine('validate')) {
                return;
            }
            search_handler($(this));

        }); // end of click
      
        $('#form_install').submit(function() {
            // only if the machine list is present
            if ($('#btn_install').length > 0) {
                submit_handler();
            }

            // disable default behavior
            return false;
        });

        $('#div_machine_list').on('click', '#btn_install', function(e) { 
            e.preventDefault(); 
            submit_handler();
        }); // end of on

    }); // end of ready()

{% endblock %}

{% block client_tmpl %}
{% endblock %}

{% block nav_title %}{{dj_title}}{% endblock %}

{% block action %}do_osuordtu{% endblock %}

{% block search_section %}
    <tr>
      <td class="th-label">Host:</td>
      <td><input  type="text" id="txt_host" name="txt_host" value="" class="fixed-field"/>
      <span class="field-indic"></span>
    </td></tr> 

    <tr>
      <td class="th-label">MGroup:</td>
      <td><select id="sel_mgroup" name="sel_mgroup" class="fixed-field">
        <option value=""></option>
      {% for g in dj_mgroup_qs %}
        <option value="{{g.id}}">{{g.name}}</option>
      {% endfor %}
      </select><span class="field-indic"></span>
      <input type="hidden" id="hid_gids" name="hid_gids" value="{{dj_gids}}"/>
    </td></tr> 

    <tr>
      <td class="th-label"></td>
      <td><input id="btn_search" name="btn_search" type="button" value="Find Machine" style="margin-left: 10px;"/>
      <span class="field-indic"></span>
    </td></tr> 
{% endblock %}

